﻿/**
 * for Info.html
 */

// 获取弹窗元素
const littleNav = document.querySelector('.little_nav');
const littleItem = document.querySelectorAll('.little_nav .little-gallery .item');
const littleLength = littleItem.length;
// 当前图片索引
let littleIndex = 0;
// 静态资源地址
const imgList = [
    '../imgs/little_nav.png',
    '../imgs/little_nav2.jpg',
    '../imgs/little_nav3.jpg',
    '../imgs/little_nav4.jpg',
    '../imgs/little_nav5.jpg'
];

// 弹窗显示与否
function showLittleNav(isShow = true) {
    if (isShow) littleNav.classList.add('show');
    else littleNav.classList.remove('show');
}

// 切换下一张图
function nextLittleImg(isNext = true) {
    // 判断前后
    if (isNext) {
        if (littleIndex >= littleLength - 1)
            littleIndex = 0; // 超过最后一张
        else littleIndex++;
    } else {
        if (littleIndex <= 0)
            littleIndex = littleLength - 1;// 超过第一张
        else littleIndex--;
    }
    // 更换图片
    setLittleImg(littleIndex);
}

// 更换图片
function setLittleImg(index) {
    // 全部隐藏
    for (let i = 0; i < littleLength; i++) {
        littleItem[i].classList.remove('show');
    }
    // 显示需展示的图片
    littleItem[index].classList.add('show');
    setMainImg(index);
}

// 设置中心图片
function setMainImg(index) {
    const mainImg = document.querySelector('.content-min-imgs');
    const mainNum = document.querySelector('.content-imgs-num');
    mainImg.style.backgroundImage = 'url(' + imgList[index] + ')';
    mainNum.innerHTML = index + 1 + ' / ' + imgList.length;
}